<template>
  <div>
    <header>
      <h3>
        {{ infoObj.nickName }}<span><i id="circleDot"></i>组局中</span>
      </h3>
      <div class="funs">
        <img
          class="label_1"
          v-show="infoObj.sex == '女'"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psnnkxr02js9t8av4is3pfirj2fssyzn58fbe2a861-3b18-4f8a-bb51-a9439058e2fe"
        />
        <span class="dmid"><i>ID:</i>30360{{ infoObj.id }}</span>
        <span class="dmfuns">{{ infoObj.fans }}<i>粉丝</i></span>
      </div>
      <div class="caiTiao">
        <span>好评率{{ infoObj.feedbackrate }}%</span>
        <span class="count">已开场{{ infoObj.frequency }}场</span>
      </div>
      <p class="address">
        <span>{{ infoObj.constellation || "射手座" }}</span>
        <span class="line"></span>
        <span>{{ infoObj.address || "中国河南" }}</span>
        <span class="line"></span>
        <span>{{ infoObj.age || 18 }}岁</span>
      </p>
    </header>
    <div class="signnature">
      <span>个性签名：</span>
      {{ infoObj.signature || "这个人很傲娇，什么也没留下" }}
    </div>
  </div>
</template>
<script>
export default {
  props: ["infoObj"],
};
</script>
<style lang="less" scoped>
.label_1 {
  width: 0.15rem;
  height: 0.15rem;
}
#circleDot {
  background-color: rgba(37, 214, 117, 1);
  border-radius: 50%;
  width: 0.05rem;
  height: 0.05rem;
  display: inline-block;
  margin-left: 0.08rem;
  margin-right: 0.08rem;
}
header {
  h3 {
    height: 0.16rem;
    color: rgb(51, 51, 51);
    font-size: 0.16rem;
    display: flex;
    align-items: center;
    span {
      display: flex;
      align-items: center;
      font-size: 0.12rem;
      color: rgb(153, 153, 153);
    }
  }
  .funs {
    display: flex;
    align-items: center;
    margin-top: 0.08rem;
    .dmid {
      display: flex;
      align-items: center;
      height: 100%;
      margin-left: 0.08rem;
      font-size: 0.14rem;
      color: rgb(51, 51, 51);
      i {
        font-style: normal;
        color: rgb(153, 153, 153);
      }
    }
    .dmfuns {
      height: 0.16rem;
      display: flex;
      font-size: 0.15rem;
      color: #333333;
      margin-left: 0.145rem;
      i {
        color: rgb(51, 51, 51);
        font-size: 0.14rem;
        font-style: normal;
      }
    }
  }
  .address {
    display: flex;
    align-items: center;
    font-size: 0.14rem;
    .line {
      width: 0.01rem;
      display: inline-block;
      height: 0.1rem;
      background-color: #909090;
      margin: 0.08rem;
      font-style: normal;
    }
  }
}
.signnature {
  height: 0.3rem;
  background-color: #fbfbfb;
  color: #666666;
  font-size: 0.12rem;
  line-height: 0.3rem;
  margin-top: 0.25rem;
  margin-bottom: 0.195rem;
  span {
    color: rgb(102, 102, 102);
    margin-right: 0.02rem;
  }
}
.caiTiao {
  height: 0.18rem;
  display: flex;
  align-items: center;
  color: #fff;
  margin-top: 0.1rem;
  margin-bottom: 0.07rem;
  span {
    font-size: 0.1rem;
    height: 0.16rem;
    line-height: 0.16rem;
    padding: 0 0.08rem;
    display: inline-block;
    border-radius: 0.16rem;
    background: linear-gradient(
      90deg,
      #d3a8ff 0%,
      #ffffff 0%,
      #cc9aff 0%,
      #8f20ff 100%
    );
    &:first-child {
      position: relative;
      z-index: 30;
    }
    &:last-child {
      padding-left: 0.48rem;
      position: relative;
      left: -0.34rem;
      z-index: 25;
    }
  }
}
</style>
